<template>
    <view>
        <view class="menu">
            <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1"><text>储值卡</text></view>
            <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2"><text>优惠券</text></view>
        </view>

        <block v-if="type == '1'">
            <view class="page">
                <view class="hy_kq" v-for="(item,index) in chuxukalist" :key="index">
                    <!-- 卡  for -->
                    <navigator class="hy_kq_kk" :url="'/packageA/youhuiquan/xiangqing?id=' + item.id">
                        <view class="hy_kq_1">
                            <view class="hy_kq_text">开业充送活动</view>
                            <view class="hy_kq_tpq">
                                <image class="hy_kq_tp" src="/static/img/大于号.png"></image>
                            </view>
                        </view>
                        <view class="hy_kq_kx">充值卡</view>
                        <view class="hy_kq_di">
                            <view>使用规则：同比例扣除</view>
                            <view>有效期限：不限期</view>
                        </view>
                    </navigator>
                </view>

                <navigator class="xinzengchuzhika" url="/packageA/youhuiquan/add">
                    <view>新增储值卡</view>
                </navigator>
            </view>
        </block>

        <block v-if="type == '2'">
            <view class="g1"></view>
            <view>
                <navigator v-for="(item,index) in youhuiquanlist" :key="index" class="kk2_1" :url="'/packageA/youhuiquan/xiangqing?id='+item.id">
                    <view class="kk2_1_1">
                        <view class="kk2_text1">￥{{item.price}}</view>
                        <view class="kk2_text2">订单满{{item.full_price}}元可使用</view>
                        <view></view>
                    </view>

                    <view class="kk2_1_2">
                        <view>{{item.name}}</view>
                        <view>{{item.start_time}} - {{item.end_time}}</view>
                        <view class="kk2_text3">立即使用</view>
                    </view>
                </navigator>
                <navigator class="xinzengchuzhika" url="/packageA/youhuiquan/add">
                    <view>新增优惠券</view>
                </navigator>
            </view>
        </block>
    </view>
</template>

<script>
// pages/youhuiquan/youhuiquan.js
var app = getApp();
import {chuxukalist,youhuiquanlist} from "@/common/api";
export default {
    data() {
        return {
            type: '1',
			page: 1,
			limit: 20,
			nextpageflag: true,
			chuxukalist: [],
			youhuiquanlist: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		this.getchuxukalist()
	},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changetype: function (option) {
            var that = this;
            var type = option.currentTarget.id;
            that.setData({
                type: type,
				Page: 1,
				nextpageflag: true
            });
            uni.showLoading({
                title: '加载中...'
            });
            uni.hideLoading();
        },
		getchuxukalist(){
			uni.showLoading({
			    title: '加载中...'
			});
			const param = {
				page: this.page,
				limit: this.limit,
				type: 1
			}
			chuxukalist(param, (res => {
				this.setData({
					chuxukalist: res.data.data.list
				})
				uni.hideLoading();
			}))
		},
		getyouhuiquanlist(){
			uni.showLoading({
			    title: '加载中...'
			});
			const param = {
				page: this.page,
				limit: this.limit
			}
			youhuiquanlist(param, (res => {
				this.setData({
					youhuiquanlist: res.data.data.list
				})
				uni.hideLoading();
			}))
		}
    }
};
</script>
<style>
.menu {
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0;
}
.menu01 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #ff4800;
    border-bottom: 2px solid #ff4800;
}
.menu02 {
    width: 23%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #666666;
}

.page {
    background-color: rgb(247, 247, 247);
    height: 100vh;
    padding: 60rpx 40rpx 60rpx 40rpx;
}

.hy_kq_kk {
    background-color: rgb(194, 162, 104);
    height: 200rpx;
    border-radius: 12rpx; /* 设置边框圆角 */
    padding: 30rpx 30rpx 30rpx 30rpx;
    color: rgb(121, 68, 19);
}
.hy_kq_1 {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
}
.hy_kq_text {
    font-weight: bold; /* 设置字体加粗 */
    font-size: 20px; /* 将字体大小设为14px */
}
.hy_kq_tp {
    width: 30rpx;
    height: 30rpx;
}
.hy_kq_tpq {
    width: 50rpx;
    height: 50rpx;
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50%;
    background-color: rgba(212, 192, 153, 0.5);
}
.hy_kq_kx {
    margin-top: 40rpx;
}

.hy_kq_di {
    margin-top: 40rpx;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
    font-size: 11px; /* 将字体大小设为14px */
}

.xinzengchuzhika {
    background-color: rgb(194, 162, 104);
    height: 100rpx;
    margin: 400rpx 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kk2_1 {
    padding: 40rpx 0rpx;
    border: 2rpx solid rgb(94, 93, 91);
}

.kk2_1_1 {
    display: flex;
    align-items: center;
    margin: 0 60rpx;
}

.kk2_text1 {
    margin-right: 110rpx;
    font-weight: bold;
    color: rgb(236, 26, 26);
}
.kk2_text3 {
    color: rgb(236, 26, 26);
    font-weight: bold;
}

.kk2_1_2 {
    display: flex;
    align-items: center;
    margin: 20rpx 0 40rpx 0;
    justify-content: space-around;
}
</style>
